{% extends "base.html" %}
{% load static %}
{% load stats_extras %}

{% block title %}统计分析 - {{ account.name }}{% endblock %}

{% block extra_css %}
<style>
    .chart-container {
        width: 100%;
        min-height: 400px;
        margin: 0 auto;
    }
</style>
<!-- 将Plotly.js移到头部加载 -->
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-10">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">{{ account.name }} - 统计分析</h1>
            </div>

            <!-- 月度统计卡片 -->
            <div class="row g-4 mb-4">
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">本月收支</h5>
                            <div class="row g-3">
                                <div class="col-6">
                                    <div class="text-muted small">收入</div>
                                    <div class="h4 text-success mb-0">{{ monthly_stats.current.income|floatformat:2 }}</div>
                                    {% with income_change=monthly_stats.current.income|subtract:monthly_stats.last.income %}
                                    <div class="small {% if income_change >= 0 %}text-success{% else %}text-danger{% endif %}">
                                        <i class="fas {% if income_change >= 0 %}fa-arrow-up{% else %}fa-arrow-down{% endif %}"></i>
                                        {{ income_change|abs_value|floatformat:2 }}
                                    </div>
                                    {% endwith %}
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">支出</div>
                                    <div class="h4 text-danger mb-0">{{ monthly_stats.current.expense|floatformat:2 }}</div>
                                    {% with expense_change=monthly_stats.current.expense|subtract:monthly_stats.last.expense %}
                                    <div class="small {% if expense_change <= 0 %}text-success{% else %}text-danger{% endif %}">
                                        <i class="fas {% if expense_change <= 0 %}fa-arrow-down{% else %}fa-arrow-up{% endif %}"></i>
                                        {{ expense_change|abs_value|floatformat:2 }}
                                    </div>
                                    {% endwith %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">年度统计</h5>
                            <div class="row g-3">
                                <div class="col-6">
                                    <div class="text-muted small">年度收入</div>
                                    <div class="h4 text-success mb-0">{{ yearly_stats.total.income|floatformat:2 }}</div>
                                    <div class="small text-muted">
                                        月均: {{ yearly_stats.monthly_avg.income|floatformat:2 }}
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted small">年度支出</div>
                                    <div class="h4 text-danger mb-0">{{ yearly_stats.total.expense|floatformat:2 }}</div>
                                    <div class="small text-muted">
                                        月均: {{ yearly_stats.monthly_avg.expense|floatformat:2 }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 趋势图 -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="chart-container">
                        {% if trend_chart %}
                            {{ trend_chart|safe }}
                        {% else %}
                            <div class="text-center py-5">
                                <img src="{% static 'images/empty.svg' %}" alt="没有数据" class="img-fluid mb-3" style="max-width: 200px;">
                                <p class="text-muted">暂无收支趋势数据</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 分类占比 -->
            <div class="card">
                <div class="card-body">
                    <div class="chart-container">
                        {% if category_chart %}
                            {{ category_chart|safe }}
                        {% else %}
                            <div class="text-center py-5">
                                <img src="{% static 'images/empty.svg' %}" alt="没有数据" class="img-fluid mb-3" style="max-width: 200px;">
                                <p class="text-muted">暂无分类统计数据</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 确保图表正确调整大小
    window.addEventListener('resize', function() {
        Plotly.Plots.resize('trend-chart');
        Plotly.Plots.resize('category-chart');
    });

    // 初始化图表
    document.addEventListener('DOMContentLoaded', function() {
        if (document.getElementById('trend-chart')) {
            Plotly.Plots.resize('trend-chart');
        }
        if (document.getElementById('category-chart')) {
            Plotly.Plots.resize('category-chart');
        }
    });
</script>
{% endblock %} 